<template>
	<head-top :loading="loading">
		<view class="detial">
			<view class="detial_title">
				<view class="bold mar">哈哈哈</view>
			</view>
			<view class="detial_content">
				<template v-if="type == 1">
					<view class="detial_area flex" @click="editarea">
						<u-image src="@/static/tabs/address.png" width="40rpx" height="40rpx"></u-image>
						<view class="detial_arearight">
							<view class="detial_arearight_title">
								<text>吴君如</text>
								<text class="detial_arearight_hui">1837987320</text>
							</view>
							<view class="detial_arearight_top">
								广东省广州市天河区天河街道中盈大厦A座26楼2606房
							</view>
						</view>
					</view>
				</template>
				<template v-else-if="type == 2">
					<view class="detial_steps">
						<view class="detial_steps_list">
							<view class="detial_steps_title bold">已下单 <text class="xi">08-11 09:38</text></view>
							<view class="flex hui" @click="logistics">
								详细信息
								<u-icon name="arrow-right" color="#919191"></u-icon>
							</view>
						</view>
						<view class="detial_steps_mar">
							送至 广东省广州市天河区天河街道中盈大厦A座26楼2606房
						</view>
						<view class="detial_arearight_title">
							<text>吴君如</text>
							<text class="detial_arearight_hui">1837987320</text>
						</view>
					</view>
				</template>
			</view>
			<view class="detial_content">
				<view class="detial_phone">
					<view class="detial_phone_img">
						<view>
							<u-image src="@/static/tabs/buku2.png" radius="50%" width="52rpx" height="52rpx"></u-image>
						</view>
						<view class="detial_phone_mar">我十明智 </view>
						<view class="detial_phone_icon">
							<u-icon name="arrow-right" color="#000"></u-icon>
						</view>
					</view>
					<BorderPhone></BorderPhone>
					<view class="detial_phone_money">
						<view>商品总价</view>
						<view>¥799</view>
					</view>
					<view class="detial_phone_money padding">
						<view>运费</view>
						<view>¥0</view>
					</view>
					<view class="detial_phone_money">
						<view>实付款</view>
						<view class="color">¥0</view>
					</view>
				</view>
			</view>
			<Bplate></Bplate>
		</view>
		<view class="detial_footer">
			<view></view>
			<view class="flex detial_footer_top">
				<button class="detial_footer_btn " @click="logistics">查看物流</button>
				<button class="detial_footer_btn yan">确认收货</button>
			</view>
		</view>
	</head-top>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue"
import { onLaunch, onShow, onLoad } from "@dcloudio/uni-app";
import BorderPhone from '@/components/BorderPhone/index.vue'
import Bplate from '@/components/Bplate/Bplate.vue'
import BSteps from '@/components/BSteps/BSteps.vue'
const loading = ref<boolean>(false)
const type = ref<number>(2)  // 1 待发货  2 待收货 3 待收货
const titleList = reactive(['待发货', '待收货'])
onLoad(() => {
	uni.setNavigationBarTitle({
		title: titleList[type.value - 1]
	})
})
function editarea() {
	uni.navigateTo({
		url: '../../subPage/addarea/addarea'
	})
}
function logistics() {
	uni.navigateTo({
		url: '../../subPage/logistics/logistics'
	})
}
</script>
<style scoped lang="scss">
.detial {
	position: relative;
	margin-bottom: 120rpx;

	&_title {
		min-height: 178rpx;
		background: #fff;
		margin-top: 1rpx;
		padding: 0 30rpx;
		font-size: 32rpx;
	}

	&_content {
		margin: 30rpx;
		padding: 30rpx;
		background: #fff;
		border-radius: 10rpx;
	}

	&_arearight {
		margin-left: 26rpx;

		&_hui {
			color: #919191;
			margin-left: 28rpx;
		}

		&_top {
			margin-top: 15rpx;
		}
	}

	&_phone {
		position: relative;

		&_img {
			display: flex;
		}

		&_mar {
			line-height: 48rpx;
			margin: 0 17rpx;
		}

		&_icon {
			margin-top: 8rpx;
		}

		&_money {
			@include flex_content(flex, space-between)
		}
	}

	&_footer {
		text-align: right;
		width: 100%;
		position: fixed;
		bottom: 0;
		line-height: 120rpx;
		height: 120rpx;
		background: #fff;

		@include flex_content(flex, space-between);

		&_btn {
			height: 53rpx;
			line-height: 53rpx;
			font-size: 25rpx;
			border-radius: 27rpx;
			background: none;
			min-width: 154rpx;
			border: 1rpx solid #000;
			margin-right: 30rpx;
		}

		&_top {
			margin-top: 30rpx;
		}
	}

	&_steps {
		position: relative;

		&_list {
			@include flex_content(flex, space-between);
		}

		&_title {
			color: $color_;
		}

		&_mar {
			margin-top: 40rpx;
			margin-bottom: 10rpx;
		}
	}
}

.yan {
	background: $background_;
	color: #fff;
	border: none;
}

.mar {
	padding-top: 67rpx;
}

.padding {
	padding: 30rpx 0;
}

.color {
	color: $color_;
}

.hui {
	color: #919191;
}

.xi {
	font-size: 24rpx;
	font-weight: normal;
	margin-left: 20rpx;
}
</style>